<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="admin/layout/include::head('页面编辑','/assets/libs/codemirror/darcula.css')"></head>
<style>
    #runjsParent #runjs{
        height: 600px;
    }
    #runjs .layui-row {
        height: 100%;
    }
    #runjs .layui-row>div{
        height: 97%;
    }
    #runjs .site-demo-btn {
        position: absolute;
        bottom: 15px;
        right: 20px;
        z-index: 10000;
    }
    #runjs .CodeMirror {
        width: 100%;
        height: 100%;
    }
    #runjsDemo {
        width: 100%;
        height: 100%;
        border: none;
    }
</style>
<body>
<div id="runjsParent">
    <div id="runjs">
        <div class="layui-row">
            <div class="layui-col-xs6">
                <textarea id="code"></textarea>
                <div class="site-demo-btn">
                    <a type="button" class="layui-btn" id="LAY_demo_run">运行代码</a>
                </div>
            </div>
            <div class="layui-col-xs6">
                <iframe id="runjsDemo">

                </iframe>
            </div>
        </div>
    </div>
</div>

<!-- js部分 -->
<div th:include="admin/layout/include::js"></div>
<div th:include="admin/layout/include::codejs"></div>


<script>
    layui.use(['layer', 'admin', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        //根据DOM元素的id构造出一个编辑器
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
            lineNumbers: true,	//显示行号
            theme: "darcula",	//设置主题
            matchBrackets: true, //夸好匹配
            tabSize: 4,
            selectionPointer: true
        });
        editor.setValue($('#runjsParent').html());
        editor.setSize('800px', '950px');
        //debugger;
        $('#runjs textarea').val('<div class="layui-col-xs6">\n' +
            '                <iframe id="runjsDemo">\n' +
            '\n' +
            '                </iframe>\n' +
            '            </div>');
        $('#LAY_demo_run').on('click', function() {
            var ifr = document.getElementById("runjsDemo");
            var code = window.editor.getValue();
            ifr.contentWindow.document.body.innerHTML = "";
            ifr.contentWindow.document.write(code);
        })


    });
</script>

</body>